<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>测试页面</title>
  </head>
  <body>
    <script src="dist/vue.js"></script>
    <div id="app" style="font-weight: 700; color: red">
      <div>你好{{ fullName }} {{fristName}}------- {{lastName}}</div>
      <my-button1></my-button1>
    </div>
  </body>
</html>
<script>
  Vue.component("my-button1", {
    template: `<button>全局按钮</button>`,
  });
  let vm = new Vue({
    el: "#app",
    // components: {
    //   "my-button1": {
    //     template: `<button>局部按钮</button>`,
    //   },
    // },
    data: {
      fristName: "张",
      lastName: "三",
    },
    computed: {
      // 1. 具有缓存机制，数据改变才会重新执行这个方法
      // 2. vue会使用object.defineProperty把computed中的属性代理到vm上
      // 3. vm.fullName
      // 使用方式：
      // 属性： 函数
      // 属性： 对象
      fullName() {
        return this.fristName + this.lastName;
      },
      // fullName: {
      //   get() {},
      //   set() {},
      // },
    },
  });
</script>
<script>
  //   //  响应式
  //   Vue.mixin({
  //     created: function a() {
  //       console.log("使用mixin混入的created -- a");
  //     },
  //   });
  //   Vue.mixin({
  //     created: function b() {
  //       console.log("使用mixin混入的created -- b");
  //     },
  //   });
  //   var vm = new Vue({
  //     el: "#app",
  //     data: {
  //       a: {
  //         m: 5,
  //       },
  //       g: ["1", "2", "3"],
  //       name: "张三",
  //     },

  //     props: {},
  //     watch: {
  //       "a.m": {},
  //       name: {
  //         handler(oldval, newval) {
  //           console.log(oldval, newval);
  //         },
  //         immediate: true,
  //       },
  //     },
  //     beforeCreate() {
  //       console.log("执行了生命周期beforeCreate");
  //     },
  //     created() {
  //       console.log("执行了生命周期created");
  //     },
  //     beforeMount() {
  //       console.log("执行了生命周期beforeMount");
  //     },
  //     mounted() {
  //       console.log("执行了生命周期mounted");
  //       this.name = "李四";
  //       // this.g.push("3333");
  //       // this.$nextTick(() => {
  //       //   console.log(vm.$el.innerHTML);
  //       // });
  //     },
  //     beforeUpdate() {
  //       console.log("执行了生命周期beforeUpdate");
  //     },
  //     updated() {
  //       console.log("执行了生命周期updated");
  //     },
  //     beforeDestroy() {
  //       console.log("执行了生命周期beforeDestroy");
  //     },
  //     destroyed() {
  //       console.log("执行了生命周期destroyed");
  //     },
  //   });
  //   console.log(vm);
  //
</script>
